<template> 
	<view class="container"> 
		<view class="content"> 
			<view class="module"> 
				<view class="module-title"> 
					<view class="module-label"></view> 
					<text class="module-text">车间任务</text> 
				</view> 
				<view class="module-content"> 
					<view class="grid"> 
						<view class="grid-item" @click="handleClick('车间生产汇报')"> 
							<image class="grid-icon" src="/static/images/icon-handle.png"></image> 
							<text class="grid-text">车间生产汇报</text> 
						</view> 
						<view class="grid-item" @click="handleClick('车间生产计划审批')"> 
							<image class="grid-icon" src="/static/images/icon-abnormal-pro.png"></image> 
							<text class="grid-text">车间生产计划审批</text> 
						</view> 
						<view class="grid-item" @click="handleClick('车间员工')">
							<image class="grid-icon" src="/static/images/icon-abnormal-pro.png"></image> 
							<text class="grid-text">车间员工</text> 
						</view>
						<view class="grid-item" @click="handleClick('车间任务上报')">
							<image class="grid-icon" src="/static/images/icon-abnormal-pro.png"></image> 
							<text class="grid-text">车间任务上报</text> 
						</view>
					</view>
				</view>
			</view>


			<pveVue/>
		</view>
	</view> 
</template>

<script>
	import pveVue from '../components/pve.vue';
export default {
	components: {
			pveVue
		},
methods: {
    navigateTo(url) {
        uni.navigateTo({ url });
    },
    
    // 独立方法：获取车间ID（与你的userId存储逻辑兼容）
   async getWorkshopId() {
       try {
           const userIdInfo = uni.getStorageSync('userIdInfo');
           if (!userIdInfo || !userIdInfo.userId) {
               uni.showToast({ title: '未登录，请重新登录', icon: 'none' });
               return null;
           }
           if (Date.now() > userIdInfo.expiration) {
               uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' });
               return null;
           }
           // 由于 uni.request() 是基于回调的，我们要用 Promise 包裹它
           const [error, res] = await new Promise((resolve) => {
               uni.request({
                   url: `http://127.0.0.1:1003/mesWorkshop/findWorkshopIdByManagerId/${userIdInfo.userId}`, 
                   method: 'GET',
                   success: (response) => resolve([null, response]),
                   fail: (err) => resolve([err, null])
               });
           });
   
           // 处理请求失败
           if (error || !res) {
               throw new Error('网络请求失败');
           }
   
           // 确保状态码正确
           if (res.statusCode !== 200 || res.data.code !== 200) { 
               throw new Error(res.data.msg || '获取车间ID失败');
           }
   
           // 这里直接返回 `res.data.data`，因为 `data` 就是 `workshopId`
           console.log('获取的车间ID：', res.data.data); // 调试输出
           return res.data.data; 
   
       } catch (error) {
           uni.showToast({ title: error.message, icon: 'none' });
           return null;
       }
   },

    // 改造后的点击方法（兼容原功能）
    async handleClick(moduleName) {
        let url = '';
        
        // 只有特定模块需要车间ID
        if (['车间生产汇报', '车间生产计划审批','车间员工','车间任务上报'].includes(moduleName)) {
            const workshopId = await this.getWorkshopId();
            if (!workshopId) return; // 失败拦截
            
            // 带参数跳转
            if (moduleName === '车间生产汇报') {
                url = `/pages/workshopUser/workShopReportPlan/index?workshopId=${workshopId}`;
            } else if (moduleName === '车间生产计划审批') {
                url = `/pages/workshopUser/workShopPlan/index?workshopId=${workshopId}`;
            }
			else if (moduleName === '车间员工') {
			    url = `/pages/workshopUser/worker/worker?workshopId=${workshopId}`;
				console.log(url);
			}
			else if (moduleName === '车间任务上报') {
			    url = `/pages/workshopUser/workshopTask/workshopTask?workshopId=${workshopId}`;
				console.log(url);
			}
			
        } else {
            // 其他模块保持原逻辑
            if (moduleName === '车间生产汇报') {
                url = '/pages/workshopUser/workShopReportPlan/index';
            } else if (moduleName === '车间生产计划审批') {
                url = '/pages/workshopUser/workShopPlan/index';
            }
			
        }
        
        if (url) uni.navigateTo({ url }); // 确保url有效再跳转
    },

    // 保持原handleNews方法不变
    handleNews(moduleNews) { 
        uni.showToast({
            title: `点击了：${moduleNews}`, 
            icon: 'none', 
        }); 
        uni.navigateTo({ url: '/pages/manage/index' }); 
    }
}
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	padding-bottom: 60px; /* 预留底部导航栏空间，防止内容被遮挡 */
	text-align: center;
}

/* 自定义底部导航栏 */
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}
.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: #444;
}
image {
	width: 24px;
	height: 24px;
}

page { 
	height: 100%; 
}
 .container { 
	 height: 100%; 
	 display: flex; 
	 flex-direction: column; 
	 background-color: #f5f5f5; 
} 
.content { 
	flex: 1; 
	padding: 40rpx; 
	overflow-y: auto; 
	} 
.module {
	margin-bottom: 80rpx;
	 } 
.module-title { 
	display: flex; 
	align-items: center; 
	font-size: 16px; 
	font-weight: bold; 
	color: #333333; 
	margin-bottom: 40rpx; 
	} 
.module-label { 
	width: 8rpx; 
	height: 14px; 
	background-color: #4080FF; 
	margin-right: 8rpx; 
	border-radius: 6rpx; 
	/* 添加圆角 */ 
	} 
.module-text { 
	font-size: 16px; 
	color: #333333;
	 font-weight: bold; 
	 } 
.module-content { 
	background-color: #f5f5f5; 
	border-radius: 16rpx; 
	padding: 16rpx 0; 
	} 
.grid { 
	margin-left: 20rpx;
	display: flex; 
	justify-content: flex-start; /* 左对齐 */ 
	align-items: center; /* 纵向居中 */ 
	gap: 80rpx; /* 调整间距，使其更接近图片上的效果 */ 
	} 
.grid-item { 
	display: flex; 
	flex-direction: column; /* 让图标在上，文字在下 */ 
	align-items: center; 
	justify-content: center;
	 } 
.grid-icon { 
	width: 36rpx; 
	height: 36rpx;
	 } 
.grid-text { 
	font-size: 14px; 
	color: #333333; 
	margin-top: 8rpx; 
	} 
.tab-bar { 
	height: 100rpx; 
	background-color: #ffffff; 
	display: flex; 
	align-items: center; 
	justify-content: space-around;
	border-top: 1px solid #eeeeee;
	flex-shrink: 0; 
	box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1); 
	} 
.tab-item { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	transition: color 0.2s ease;
	 } 
.tab-text { 
	font-size: 12px; 
	color: #999999; 
	margin-top: 8rpx; 
	} 
.active .tab-text { 
	color: #4080ff; 
	} 
</style>
